<template>
	<!--配合specTree.vue使用-->
	<div class="spec-tree-item">
			<div v-if="noLast">
				<!-- 不是最后一组规格 -->
				<div class="sku-item">
					<div class="sku-item-title"><span>{{ getTreeData[0].AttributeName }}：</span></div>
					<div class="sku-item-select">
						<div v-for="(item,index) in getTreeData" v-if="!item.IsLock" :key="index" class="btn btn-gray-fill skuBtn"
							:class="activeIndex===index?'color-primary':''" @click="_clickEvent(item,index)">
							{{ item.ValueStr }}
						</div>
					</div>
				</div>
				<div v-if="getTreeData[0].ProductAttrList && getTreeData[0].ProductAttrList.length > 0" class="spec-sub-tree">
					<!--SpecTreeItem组件中调用SpecTreeItem组件-->
					<!-- 根据上级规格的数量创建多个item，根据上级规格选中的项来显示对应的下级规格栏-->
					<div v-for="(item,index) in getTreeData" v-show="activeIndex===index" :key="index">
						<SpecTreeItem :tree-data="item.ProductAttrList" :product-name="productName" :active-id="activeId" :min-num="minNum" :product-id="productId"
							:limit-buy="limitBuy" @treeClickEvent="treeClickEvent" @setCarListFunc="setCarListFunc" :tempType="tempType" />
					</div>
				</div>
			</div>
			<div v-else>
				<!-- 是最后一组规格 -->
				<div class="flex-s-c mt-24 color-gray-light fs-24" v-if="getTreeData[0]">
					<div class="flex-1 tal" v-if="getTreeData[0].AttributeName">{{ getTreeData[0].AttributeName }}</div>
					<div class="flex-1 tac">价格</div>
					<div class="flex-1 tar">购买数量</div>
				</div>
				<div v-for="(item,index) in getTreeData" :key="index" class="flex-s-c mt-24 fs-28" v-if="item.SkuModel && !item.IsLock">
					<div v-if="item.ValueStr && getTreeData[0] && getTreeData[0].AttributeName" class="num-value flex-1">
					{{ item.ValueStr }}</div>
					<div class="flex-1 tac">{{ item.SkuModel.V_GradePrice }}</div>
					<div class="flex-1 tar flex-fe-c">
						<span
							class="btn-minus flex-s-0 "
							:class="item.Amount <= 0 ? 'color-shadow' : ''"
							@click="changeAmount(item, item.Amount, -1)"
						>-</span>
						<div class="btn-input-box">
							<input v-model="item.Amount" type="number" class="btn-input" @blur="changeAmount(item, item.Amount, 0)">
						</div>
						<span class="btn-plus flex-s-0" @click="changeAmount(item, item.Amount, 1)">+</span>
					</div>
				</div>
			</div>
		</div>
	
</template>

<script>
	import {
		mapMutations,
		mapGetters
	} from 'vuex'
	import SpecTreeItem from "../allocation/specTreeItem.vue"


	export default {
		name: 'SpecTreeItem',
		components: {
			SpecTreeItem,
		},
		props: {
			treeData: {
				type: Array,
				default () {
					return []
				}
			},
			activeId: {
				type: Number,
				default: -1
			},
			minNum: {
				type: Number,
				default: 0
			},
			limitBuy: {
				type: Number,
				default: 0
			},
			isSingle: {
			  type: Boolean,
			  default: false
			},
			tempType: {
				type: Number,
				default: 0
			},
			switch7:{
				type:Number,
				required: false,
				default:0
			},
			productId: {
				type: Number,
				default: 0
			},
			productName: {
				type: String,
			},
		},
		watch: {
			//监听购物车数据
			getCartData(data) {
			},
			//监听临时购物车数据
			getTempCartData(data) {
			}
		},
		computed: {
			//...mapGetters([
			//	'getCartData',
			//	'getTempCartData',
			//])
		},
		data() {
			return {
				activeIndex: 0,
				numValue: 0,
				noLast:false,
				getTreeData:[],
				activeUnitRatio: 1,
				cartRequestList: [],
			}
		},
		watch: {
			treeData(newVal, oldVal) {
				console.log('商品变化222')
				//this.getTreeData = newVal
				this.getTreeItem()
			},
		},
		created(){
			console.log(this.treeData,"传参")
		},
		mounted() {
			this.getTreeItem()
		},
		methods: {
			getTreeItem(){
				this.getTreeData = this.treeData
				this.noLast = this.getTreeData && this.getTreeData.length>0 && this.getTreeData[0].ProductAttrList && this.getTreeData[0].ProductAttrList.length>0
				if(!this.noLast){
					this.getTreeData.forEach(e=>{
						this.getCurrentNum(e)
					})
				}
				console.log(55)
				console.log(this.tempType)
				this.$forceUpdate()
			},
			// 加入购物车
			addCart() {
				console.log('this.cartRequestList',this.cartRequestList)
				this.closePopup()
				this.$emit('addCart', this.cartRequestList)
				// this.cartRequestList = []
				// this.activeUnitName = ''
				// this.activeUnitRatio = 1
			},

		
			getCurrentNum(item) {
				item.Amount = 0
			},
			//获取购买数量
			getAmount(num){
				return num
			},
			// 节点点击事件
			_clickEvent(item, index) {
				console.log(this.cartRequestList,"aa")
				this.activeIndex = index
				
				// 如果有传递事件函数，则调用事件函数并传递当前节点数据及组件
				this.treeClickEvent(item, index)
			},
			changeAmount(item, num, type) {
				console.log(item,"多大的")
				if(type === 1){
					item.Amount += 1
				}else if(type === -1){
					item.Amount -= 1
				}else{
					item.Amount = num
				}
				const _obj = {}
				_obj.ProductId = this.productId
				_obj.Amount = item.Amount
				_obj.SkuId = item.SkuModel.SkuId
				_obj.Price = item.SkuModel.V_GradePrice
				_obj.ProductName = this.productName
				_obj.TotalMoney = item.Amount * item.SkuModel.V_GradePrice
				let _newObj = true
				this.V_GradePrice = item.V_GradePrice
				if (this.cartRequestList && this.cartRequestList.length > 0) {
					console.log('cartRequestList',1)
					console.log('cartRequestList',this.cartRequestList)
					for (let i = 0; i < this.cartRequestList.length; i++) {
						if (_obj.SkuId === this.cartRequestList[i].SkuId && _obj.ProductId === this.cartRequestList[i].ProductId) {
							this.cartRequestList[i].Amount = _obj.Amount
							this.cartRequestList[i].TotalMoney = _obj.Amount * _obj.Price
							_newObj = false
							break
						}
					}
				}
				
				if (_newObj) {
					this.cartRequestList.push(_obj)
					console.log('cartRequestList',2)
					console.log('cartRequestList',this.cartRequestList)
				}
				this.$emit('setCarListFunc', this.cartRequestList)
				
				this.$forceUpdate()
			},
			setCarListFunc(obj) {
				this.$emit('setCarListFunc', obj)
				this.$forceUpdate()
			},
			treeClickEvent(item, index) {
				this.$emit("treeClickEvent", item, index)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.spec-tree-item {
		.sku-item {
			display: flex;
			flex-direction: column;
			margin-bottom: 20px;
			border-bottom: 1px solid #ebedf0;
	
			.sku-item-title {}
	
			.sku-item-select {
				display: flex;
				flex-direction: row;
				margin: 20px 0;
				flex-wrap: wrap;
				.btn {
					min-width: 100px;
					border-radius: 10px;
					margin-right: 20px;
				}
			}
		}
	
	
	
		
	}

	
    .skuBtn {
      position: relative;
      font-size: 28px;
      line-height: 64px;
      padding: 0 30px;
      min-width: 136px;
      border-radius: 8px;
      overflow: hidden;
      margin: 0 20px 20px 0;
      text-align: center;
      &:before {
        content: '';
        position: absolute;
        height: 100%;
        width: 100%;
        background: currentColor;
        opacity: 0.1;
        top: 0;
        left: 0;
      }
    }
    .btn-input-box {
      position: relative;
      margin: 0 4px;
      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: currentColor;
        opacity: 0.1;
      }
      .btn-input {
        position: relative;
        z-index: 1;
        height: 56px;
        width: 80px;
        line-height: 1;
        border: none;
        // background: transparent;
        text-align: center;
      }
    }
    .btn-minus,
    .btn-plus {
      position: relative;
      font-size: 45px;
      line-height: 56px;
      height: 56px;
      width: 56px;
      text-align: center;
      overflow: hidden;
      border-radius: 0 8px 8px 0;
      &:before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: currentColor;
        opacity: 0.1;
      }
    }
    .btn-minus {
      border-radius: 8px 0 0 8px;
    }
</style>
